<template>
	<!-- 系统管理菜单组件 -->
	<div class="sc-select">
		<div v-if="initloading" class="sc-select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-cascader
			v-bind="$attrs"
			:options="options"
			:loading="loading"
			:props="props"
		></el-cascader>
	</div>
</template>

<script>
// import config from "@/config/dict";

export default {
	props: {
		apiObj: { type: Object, default: () => {} }, //获取接口
		checkStrictly: { type: Boolean, default: false }, //是否可选任意一级
		multiple: { type: Boolean, default: false }, //是否多选
		label: { type: String, default: "name" }, //用于显示的值
		value: { type: String, default: "id" }, //内部值
		children: { type: String, default: "children" }, //子集表现形式
		parents: { type: String, default: "parentIds" }, //父集表现形式
		ifTree: { type: Boolean, default: true }, //是否为树结构
		disabledCode: { type: String, default: "" }, //禁用字典选项编码
		ifGet: { type: Boolean, default: true }, //是否为get请求
		placeholder:{ type: String, default: "" }, //placeholder内容
	},
	data() {
		return {
			loading: false,
			options: [],
			props: [],
			initloading: false,
		};
	},
	created() {
		this.getRemoteData();
	},
	methods: {
		//获取数据
		async getRemoteData() {
			this.initloading = true;
			this.props = {
				label: this.label,
				value: this.value,
				children: this.children,
				emitPath: false,
				multiple: this.multiple,
				checkStrictly: this.checkStrictly,
				placeholder: this.placeholder
			};
			this.loading = true;
			let res = {}
			if(this.ifGet){
				res = await this.apiObj.get();
			}else{
				res = await this.apiObj.post();
			}
			
			if (res.code == 0) {
				if (this.ifTree == true) {
					let response = res.data;
					let formatData = this.gsObject(response);
					this.options = formatData
				} else {
					this.options = res.data;
				}
			} else {
				let errdata = this.$TOOL.response(res);
				this.$alert(
					this.$TOOL.json.get("", errdata, "message"),
					this.$TOOL.json.get("", errdata, "title"),
					{
						type: "error",
						confirmButtonText: "确定",
						dangerouslyUseHTMLString: true,
						showCancelButton: false,
					}
				);
			}
			this.loading = false;
			this.initloading = false;
		},
		//格式化数据 添加禁用选项
		gsObject(data) {
			const formatData = [];
			if (data) {
				data.forEach((item) => {
					
					if (this.disabledCode && (item[this.value] == this.disabledCode || item[this.parents].indexOf(this.disabledCode) >=0)) {
						item["disabled"] = true;
					}
					this.gsObject(item[this.children]);
					item[this.children] = item[this.children]
						? this.gsObject(item[this.children])
						: null;
					formatData.push(item);
				});
			}
			return formatData;
		},
	},
};
</script>

<style scoped>
.sc-select {
	display: inline-block;
	position: relative;
}
.sc-select-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 100;
	border-radius: 5px;
	border: 1px solid #ebeef5;
	display: flex;
	align-items: center;
	padding-left: 10px;
}
.sc-select-loading i {
	font-size: 14px;
}

[data-theme="dark"] .sc-select-loading {
	background: var(--el-color-white);
	border-color: var(--el-border-color-base);
}
</style>
